<template>
	<div>
		<div class="swiper-container bigPic">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../../public/images/banner.png" alt="###"></div>
				<div class="swiper-slide"><img src="../../public/images/cake.jpg" alt=""></div>
				<div class="swiper-slide"><img src="../../public/images/banner.png" alt=""></div>
				<div class="swiper-slide"><img src="../../public/images/cake.jpg" alt=""></div>
				<div class="swiper-slide"><img src="../../public/images/banner.png" alt=""></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="recommend">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="fridayRem">
			<div class="foodwrap">
				<div class="foodtitle friday">
					<div><i class="iconfont icon-icon-test"></i>礼拜五</div>
					<div>Friday</div>
					<div class="Fritime"><strong>距离开始</strong><span>{{day}}天</span><span>{{hr}}</span><strong>:</strong><span>{{min}}</span><strong>:</strong><span>{{sec }}</span></div>
					<div>更多></div>
				</div>
				<div class="swiper-container2 bgpic2">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner-13.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner-14.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner-15.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner-6.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="swiper-slide-small">
								<div><img src="../../public/images/banner.png" alt="" class="imgpic"></div>
								<div>大苹果</div>
								<div>6个装</div>
								<div><span class="spana1">礼拜五价：</span><span class="spana2">￥28.80</span></div>
							</div>
						</div>
					</div>
					<!-- <div class="swiper-pagination"></div> -->
				</div>
			</div>
		</div>
		<homefood classname='icon-xingxiansg' type="新鲜水果" typeAbout="采自新疆优质水果生产基地"></homefood>
		<homefood classname='icon-haixian' type="水产海鲜" typeAbout="国内外新鲜到港的鱼虾蟹贝"></homefood>
		<homefood classname='icon--roulei' type="肉类禽蛋" typeAbout="采自新疆优质水果生产基地"></homefood>
		<homefood classname='icon-niunaiping' type="蛋奶速食" typeAbout="国内外新鲜到港的鱼虾蟹贝我们全部都有"></homefood>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	import homefood from '../components/homefood.vue';
	export default {
		components: {
			homefood,
		},
		data(){
			return {
				day: 0,//天
				hr: 0,//时
				min: 0,//分
				sec: 0,//秒
				fridayfood:[]
			}
		},
		created(){
			// this.$axios.post('http://localhost:3000/fridayfood',{})
			// .then(function(response){
			// 	var list=response.data;
			// 	if(list.code==200){
			// 		this.fridayfood=list.data
			// 	}
			// });
			localStorage.setItem("userphone","15503757093");
			this.userphone=localStorage.getItem("userphone")
		},
		mounted() {
			new Swiper('.swiper-container', {
				loop: true,
				autoplay: 3000,
				// 如果需要分页器
				pagination: '.swiper-pagination',
				paginationClickable: true,
			}),
			new Swiper('.swiper-container2', {
				loop: true,
				slidesPerView : 4,
				slidesPerGroup : 4,
				// 如果需要分页器
				// pagination: '.swiper-pagination',
				// paginationClickable: true,
			}),
			this.countdown()
		},
		methods:{
			//倒计时
			countdown() {
				const end = Date.parse(new Date("2020-02-21"));
				const now = Date.parse(new Date());
				const msec = end - now;
				let day = parseInt(msec / 1000 / 60 / 60 / 24);
				let hr = parseInt(msec / 1000 / 60 / 60 % 24);
				let min = parseInt(msec / 1000 / 60 % 60);
				let sec = parseInt(msec / 1000 % 60);
				this.day = day
				this.hr = hr > 9 ? hr : '0' + hr;
				this.min = min > 9 ? min : '0' + min;
				this.sec = sec > 9 ? sec : '0' + sec;
				const that = this;
				this._interval = setTimeout(function () {
					that.countdown()
				}, 1000)
			}
		},
		beforeDestroy() {
			clearInterval(this._interval)
		},
	}
</script>

<style>
	.bigPic {
		width: 100%;
		height: 500px;
	}
	
	.bigPic img {
		width: 100%;
		height: 100%;
	}
	
	.recommend {
		width: 66.7%;
		height: 140px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}
	
	.recommend div {
		width: 24%;
		height: 140px;
		background: url("../../public/images/banner.png") no-repeat;
		background-size: 100% 100%;
	}
	
	.recommend div:nth-of-type(1) {
		background: url("../../public/images/banner-1.png") no-repeat;
	}
	
	.recommend div:nth-of-type(2) {
		background: url("../../public/images/banner-2.png") no-repeat;
	}
	
	.recommend div:nth-of-type(3) {
		background: url("../../public/images/banner-3.png") no-repeat;
	}
	
	.recommend div:nth-of-type(4) {
		background: url("../../public/images/banner-4.png") no-repeat;
	}
	.foodwrap .friday div{
		float: left;
	}
	.foodwrap .friday .Fritime{
		font-size: 20px;
		margin-left: 25%;
	}
	.foodwrap .friday .Fritime strong{
		font-weight: normal;
		color: #4B943D;
		float: left;
	}
	.foodwrap .friday .Fritime span{
		float: left;
		color: white;
		width: 60px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin-left: 5px;
		background: #f08200;
		margin-top: 31px;
		border-radius: 5px;
	}
	.foodwrap .friday div:nth-of-type(4){
		font-size: 20px;
		height: 102px;
		line-height: 102px;
		color: #bcc6bb;
		float: right;
	}
	.swiper-container2{
		overflow: hidden;
	}
	.bgpic2{
		height: 450px;
	}
	.swiper-container2 .swiper-wrapper .swiper-slide{
		height: 480px;
	}
	.swiper-slide-small{
		width: 80%;
		margin-left: 10%;
		height: 90%;
		margin-top: 5%;
		background: #f8f6f7;
	}
	.swiper-slide-small div:nth-of-type(1){
		height: 306px;
	}
	.swiper-slide-small div:nth-of-type(2){
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
	.swiper-slide-small div:nth-of-type(3){
		text-align: center;
	}
	.swiper-slide-small div:nth-of-type(4){
		margin-top: 10px;
		font-size: 20px;
		text-align: center;
	}
	.spana1{
		color: #f08200;
	}
	.spana2{
		color: #fcadad;
	}
</style>
